<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <div th:include="Introduce/head"></div>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
  /*  #loginDiv {
        width:600px;height:400px;
        position:absolute;left:50%;top:50%;
        z-index: 10000;
        margin-top:-200px;!*高度的一半*!
        margin-left:-300px;!*宽度的一半*!

        !* 关键代码 *!
        border: 10px solid rgba(255,255,255,.5);
        background: white;
        background-clip: padding-box;
    }*/
    .box
    {
        z-index: 10000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width:400px;
        padding: 40px;
        background:rgba(0,0,0,.8);
        box-sizing:border-box;
        box-shadow:0 15px 25px rgba(0,0,0,.5);
        border-radius: 10px;/*登录窗口边角圆滑*/
    }
    .box h2
    {
        margin:0 0 30px;
        padding:0;
        color:#fff;
        text-align:center;
    }
    .box .inputBox
    {
        position:relative;
    }
    .box .inputBox input
    {
        width: 100%;
        padding: 10px 0;
        font-side:16px;
        color: #fff;
        letter-spacing: 1px;
        margin-bottom:30px;/*输入框设置*/
        border:none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;
    }
    .box .inputBox label
    {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: .5s;
    }
    .box .inputBox input:focus ~ label,
    .box .inputBox input:valid ~ label
    {
        top: -18px;
        left: 0;
        color: #03a9f4;
        font-size: 12px;
    }
    .box  input[type="submit"]
    {
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        background: #03a9f4;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
    }

</style>
<body>

<div class="layui-carousel" id="carousel">
    <div carousel-item>
        <img src="/static/image/login.jpg">
        <img src="/static/image/login-2.png">
    </div>
</div>
</body>
<div id="loginDiv">
    <div style="margin: 10px">
        <div class="box">
            <h2>廖仙儿的后台管理系统登录</h2>
            <form id="form">
                <div class="inputBox">
                    <input type="text" name="userName" required lay-verify="required"  autocomplete="off" class="layui-input">
                    <label>用户名</label>
                </div>
                <div class="inputBox">
                    <input type="password" name="password" autocomplete="off" class="layui-input">
                    <label>密码</label>
                </div>
                <input type="button" onclick="onLogin()" name="" value="登录">
            </form>
        </div>
    </div>

</div>

<script>
    layui.use(['carousel','layer'], function () {
        var carousel = layui.carousel
        //建造实例
        carousel.render({
            elem: '#carousel'
            , full: true
            , arrow: 'none' //始终显示箭头
            , indicator: 'none'//始终不显示指示器
            , anim: 'fade' //切换动画方式
            , interval: 3500 //5秒切换

        });

    });
    function onLogin(){
        var formData = {};
        var t = $('#form').serializeArray();
        $.each(t, function() {
            formData[this.name] = this.value;
        });
        $.ajax({
            url:'/user/login',
            type:'POST',
            data:JSON.stringify(formData),
            contentType:'application/json;charset=UTF-8',
            dataType:'json',
            success:function (res){
                if(res.code==200){
                    window.location='/home/workpalte';
                }
                if(res.code==500){
                    layer.msg(res.msg);
                }

            }
        })
    }
</script>


</html>